<template>
  <div class="banner">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(v, index) in arr" :key="index">
        <img :src="v.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          img: require("@/assets/img/banner1.png"),
        },
        {
          img: require("@/assets/img/banner2.png"),
        },
        {
          img: require("@/assets/img/banner3.png"),
        },
        {
          img: require("@/assets/img/banner4.png"),
        },
        {
          img: require("@/assets/img/banner5.png"),
        },
        {
          img: require("@/assets/img/banner6.png"),
        },
        {
          img: require("@/assets/img/banner6.png"),
        },
      ],
    };
  },
};
</script>

<style scoped>
img {
  display: block;
  width: 100%;
  height: 52vw;
  border-radius: 1.3333vw;
}
</style>